<template>
  <el-affix :offset="0">
    <div class="flex bg-white h-[64px] pr-4 border-b border-slate-100">
      <!-- 左边栏收缩、展开 -->
      <div @click="handleMenuWidth"
        class="flex w-[42px] h-[64px] cursor-pointer items-center justify-center text-gray-700 hover:bg-gray-200">
        <el-icon>
          <Fold v-if="menuStore.menuWidth == '250px'" />
          <Expand v-else />
        </el-icon>
      </div>
      <!-- 右边栏 刷新 全屏 用户头像 -->
      <div class="flex ml-auto">
        <!-- 点击刷新页面 -->
        <el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
          <div @click="handleRefresh"
            class="flex w-[42px] h-[64px] cursor-pointer justify-center items-center text-gray-700 hover:bg-gray-200">
            <el-icon>
              <Refresh />
            </el-icon>
          </div>
        </el-tooltip>

        <!-- 点击跳转前台首页 -->
        <el-tooltip class="box-item" effect="dark" content="跳转前台" placement="bottom">
          <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
            @click="router.push('/')">
            <el-icon>
                <House />
            </el-icon>
          </div>
        </el-tooltip>

        <!-- 点击全屏展示 -->
        <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
          <div @click="toggle"
            class="flex w-[42px] h-[64px] cursor-pointer justify-center items-center mr-2 text-gray-700 hover:bg-gray-200">
            <el-icon>
              <FullScreen v-if="!isFullscreen" />
              <Aim v-else />
            </el-icon>
          </div>
        </el-tooltip>

        <!-- 登录用户头像 -->
        <el-dropdown class="flex items-center justify-center" @command="handleCommand">
          <span class="el-dropdown-link flex justify-center items-center text-gtay-700 text-xs">
            <el-avatar :size="25" :src="userStore.userInfo.avatar" class=" mr-2" />
            {{ userStore.userInfo.nickname }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 修改密码 -->
        <!-- <el-dialog v-model="dialogVisible" title="修改密码" width="40%" :draggable ="true" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="form" ref="formRef" :rules="rules">
              <el-form-item label="用户名" prop="username" label-width="120px">
                <el-input size="large" v-model="form.username" placeholder="请输入用户名" clearable disabled></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" label-width="120px">
                <el-input type="password" size="large" v-model="form.password" placeholder="请输入密码" clearable show-password></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="rePassword" label-width="120px">
                <el-input type="password" size="large" v-model="form.rePassword" placeholder="请确认密码" clearable show-password></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog> -->
        <FormDialog ref="formDialogRef" title="修改密码" destroyOnClose @submit="onSubmit">
          <el-form :model="form" ref="formRef" :rules="rules" label-width="80px">
            <el-form-item label="账号" prop="username">
              <el-input size="large" v-model="form.username" placeholder="请输入账号" clearable disabled></el-input>
            </el-form-item>
            <el-form-item label="原密码" prop="password">
              <el-input type="password" size="large" v-model="form.password" placeholder="请输入原密码" clearable
                show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input type="password" size="large" v-model="form.newPassword" placeholder="请输入新密码" clearable
                show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="rePassword">
              <el-input type="password" size="large" v-model="form.rePassword" placeholder="请确认密码" clearable
                show-password></el-input>
            </el-form-item>
          </el-form>
        </FormDialog>
      </div>
    </div>
  </el-affix>
</template>
<script setup>
import FormDialog from '@/components/FormDialog.vue'
import { updateAdminPassword } from '@/api/admin/user'
import { showModel, showMessage } from '@/composables/util'
import { useMenuStore } from '@/stores/menu'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ref, reactive, watch } from 'vue'
// 引入useFullscreen
import { useFullscreen } from '@vueuse/core'
// 引入菜单的store
const menuStore = useMenuStore()
// 引入用户的store
const userStore = useUserStore()
const router = useRouter()
// isFullscreen 表示当前是否处于全屏；toggle 用于动态切换全屏、非全屏
const { isFullscreen, toggle } = useFullscreen()
// 刷新页面
const handleRefresh = () => location.reload()
//icon点击事件
const handleMenuWidth = () => {
  // 动态设置菜单的宽度大小
  menuStore.handleMenuWidth()
}

// 下拉菜单事件处理
const handleCommand = (command) => {
  // 更新密码
  if (command == 'updatePassword') {
    // 打开前先删除原来的数据
    form.password = ''
    form.newPassword = ''
    form.rePassword = ''
    formDialogRef.value.open()
  } else if (command == 'logout') {
    logout()
  }
}

// 退出登录
const logout = async () => {
  await showModel('是否确认要退出登录？')
  userStore.logout()
  showMessage('退出登录成功！')
  // 跳转登录页
  router.push('/login')
}

// 对话框是否显示
// const dialogVisible = ref(false)

// 修改用户密码表单对象
const form = reactive({
  username: userStore.userInfo.username || '',
  password: '',
  newPassword: '',
  rePassword: ''
})

//表单引用
const formRef = ref(null)

// 规则校验
const rules = {
  username: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '原密码不能为空',
      trigger: 'blur',
    },
  ],
  newPassword: [
    {
      required: true,
      message: '新密码不能为空',
      trigger: 'blur',
    },
  ],
  rePassword: [
    {
      required: true,
      message: '确认密码不能为空',
      trigger: 'blur',
    },
    {
      validator: (rule, value, callback) => {
        // 判断 value 和 当前 form 中收集的 password 是否一致
        if (value !== form.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback() // 就算校验成功，也需要callback
        }
      },
      trigger: 'blur'
    }
  ]
}

// 提交修改密码
const onSubmit = async () => {
  await formRef.value.validate()
  // 调用修改用户密码接口
  const res = await updateAdminPassword(form)
  if (res.success == true) {
    showMessage('密码重置成功，请重新登录！')
    // 退出登录
    userStore.logout()
    // 隐藏对话框
    formDialogRef.value.close()
    // 跳转登录页
    router.push('/login')
  } else {
    // 获取服务端返回的错误消息
    const message = res.message
    // 提示消息
    showMessage(message, 'error')
  }
}

// 修改密码弹框引用
const formDialogRef = ref(null)

// 监听 Pinia store 中的某个值的变化
watch(() => userStore.userInfo.username, (newValue, oldValue) => {
  // 重新将新的值，设置回 form 对象中
  form.username = newValue
});
</script>